<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2017/10/27
  Time: 3:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-1.8.3.js"></script>
    <!--
        1.导入jQuery
        2.获取name="username"的节点：username
        3.为username添加change响应函数
        3.1.获取username的value的属性值，去除前后空格且不为空。准备发送Ajax请求
        3.2.发送Ajax请求检验username是否有用
        3.3在服务端直接返回一个html片段
        3.4在客户端浏览器把其直接添加到message的HTML中
    -->
    <script type="text/javascript">
        $(function () {
            $(":input[name='username']").change(function () {
                var val = $(this).val();
                val = $.trim(val);
                if(val!=""){
                    var url = "${pageContext.request.contextPath}/UserName"
                    var args = {"username":val,"time":new Date()};
                    $.post(url,args,function (data) {
                        $("#message").html(data);
                    })
                }
            });
        })
    </script>
</head>
<body>
<front style="color: red"></front>
<form action="" method="post">
    UserName:<input type="text"name="username"><br>
    <div id="message"></div><br>
    <input type="submit" value="Submit"></form>
</body>
</html>
